@import '/@/design/color.less';
@selectedColor: #f6f7ff;
@lighterBlue: #409eff;

.diy-form-designer {
  // overflow-y: auto;
}

.ant-col {
  width: 100%;
}

.diy-form-widget-container {
  // 设置拖拽展示的样式
  .ghost {
    content: '';
    font-size: 0;
    height: 3px;
    box-sizing: border-box;
    background: @primary-color;
    border: 2px solid @primary-color;
    outline-width: 0;
    padding: 0;
    overflow: hidden;
  }
}

.diy {
  &-p5 {
    padding: 5px !important;
  }

  &-side {
    overflow: auto;
    height: auto;
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
  }

  &-main-container {
    background: #fff !important;
    //
    // :deep(aside) {
    //   margin: 0;
    //   padding: 0;
    //   background: inherit;
    // }
  }

  &-full-container {
    padding-top: 5px;
    height: 100%;
    align-items: stretch;
    overflow-y: hidden;
  }

  &-center-layout-container {
    min-width: 600px;

    border-left: 2px dotted #ebeef5;
    border-right: 2px dotted #ebeef5;
  }

  &-side-panel {
    background-color: #ffffff !important;
    overflow-y: hidden;
  }

  &-toolbar-header {
    padding: 0px 5px !important;
    background-color: #ffffff !important;
    text-align: center;
    font-size: 14px;
    border-bottom: 1px dotted #cccccc;
    height: 42px !important;
    line-height: 42px !important;
  }

  &-form-widget-content {
    // padding-top: 20px;
    background-color: #f1f2f3 !important;
    position: relative;
    overflow-x: hidden;
    overflow-y: hidden;
  }

  &-form-setting {
    background-color: #ffffff !important;
  }
}

// 头部
.diy-header {
  display: flex;
  background: #fff !important;
  color: #333333 !important;
  border-left: 2px dotted #ebeef5;
  border-right: 2px dotted #ebeef5;
  position: sticky;
  justify-content: space-between;
  top: 0;
  z-index: 1000;
  height: 48px !important;
  line-height: 48px !important;
  box-shadow: 0px 4px 10px 0px rgba(96, 96, 96, 0.1) !important;

  &-form-name {
    font-size: 15px;
    max-width: 300px;
    overflow: hidden; /* 隐藏超出内容 */
    text-overflow: ellipsis; /* 显示省略号 */
    white-space: nowrap; /* 强制文本在同一行显示，防止换行 */
  }
  &-left {
    display: flex;
    min-width: 500px;
  }

  &-right {
    height: 100%;
    min-width: 500px;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    margin-right: 20px;
  }
  &-center {
    height: 100%;
    .ant-steps-small {
      display: flex;
      align-items: center;
    }
  }
  &-back {
    // position: relative;
    font-size: 15px;
    cursor: pointer;
    width: 100px !important;
    // right: 2px;
  }

  &-line {
    border-right: 1px solid #ebeef5;
  }

  &-back:hover {
    color: @hover-color !important;
    span {
      color: @hover-color !important;
    }
  }
}

.diy-sider {
  color: #303133;
  overflow: auto;
  display: inline-block;
  padding: 10px;
  background-color: #ffffff;
}

.diy-content {
  // margin: 10px;
  color: #fff;
  // display: flex;
  position: relative;
  // justify-content: center;
  // background-color: gold;
}

.diy-main-content {
  display: flex;
  overflow-y: auto;
}

.diy-component {
  // background: yellow;
  background-color: #ffffff;
  width: 350px;
  min-width: 350px;
  overflow: auto;
}

.diy-main-page {
  flex: 1;
  position: relative;
  // background: #00FFFF;
  background-color: #f4f4f4;
  min-width: 570px;
  display: flex;
  justify-content: center;
}

.diy-tool {
  width: 400px;
  min-width: 400px;
  // background: red;
  background-color: #ffffff;
  overflow: auto;
}

.diy-padding-10 {
  padding: 10px;
}
